<template>
	<view class="niceui-flex-column width-100p bg">
		<view class="niceui-flex-column">
			<image class="banner-img" src="/static/sign3-banner.png" mode="widthFix"></image>
		</view>
		<view class="center-nav margin-top">
			<view class="center-nav-title">
				<text>已连续签到<text class="strong-text"> {{cuntinueDays}} </text>天</text>
				<!-- <text class="signin-rule">签到规则 <text class="rule-more">&#xe600;</text></text> -->
			</view>
			<view class="days-area">
				<view class="six-day-bf">
					<view class="six-day-bf-item" v-for="(dy,index) in signinDays" :key="index" v-if="index<6"
					:class="index>thisDay-1?'day-will':'day-over'" @click="onSign">
						<template >
							<text class="six-day-bf-item-text">{{dy.text}}</text>
							<image :src="'/static/'+dy.image" class="six-day-bf-img" mode="widthFix" :class="index==3||index==5?'six-day-bf-img-big':''"></image>
							<text class="six-day-bf-item-desc">{{dy.desc}}</text>
						</template>
					</view>
				</view>
				<view class="seven-day">
					<view class="seven-day-item day-will">
						<text class="six-day-bf-item-text">{{signinDays[6].text}}</text>
						<text class="seven-day-item-desc">{{signinDays[6].desc}}</text>
						<image :src="'/static/sign3-box.png'" class="seven-day-item-img" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="center-nav niceui-flex-row niceui-center niceui-between">
			<view class="niceui-flex-column padding-card">
				<view><text class="act-text">连签三周</text></view>
				<text class="other-text">即可获得<text class="strong-text">价值388元超值礼包！</text></text>
			</view>
			<image class="act-img" src="/static/sign3-sup.png" mode="widthFix"></image>
		</view> -->
		<!-- <view class="center-nav">
			<view class="center-list-item">
				<view class="signin-item" v-for="(tk,index) in task" :key="index">
					<text class="signin-item-text">{{tk.text}}</text>
					<text class="signin-item-desc">{{tk.desc}}</text>
					<image :src="'/static/'+tk.image" class="signin-item-img" mode="widthFix" :class="index==1?'signin-item-img-small':''"></image>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapState } from 'vuex';
	export default {
		data() {
			return {
				sucPop:false,
				progressing:20,
				days: [], //日历
				cuntinueDays: 0, //签到天数
				score: '', //签到获得的积分
				cur_year: 0, //当前选的年
				cur_month: 0, //当前选的月
				cur_day: 0, //当前选择的天
				today: parseInt(new Date().getDate()), //本日
				toMonth: parseInt(new Date().getMonth() + 1), //本月
				toYear: parseInt(new Date().getFullYear()), //本年
				weeks_ch: ['日', '一', '二', '三', '四', '五', '六'], //星期
				isPresentMonth: false, //是否可签到
				isSign: false,
				showSign: false,
				signinDays:[
					{
						image:"sign3-point.png",
						text:'第1天',
						desc:'1积分',
						class:'color-1'
					},
					{
						image:"sign3-point.png",
						text:'第2天',
						desc:'1积分',
						class:'color-1'
					},
					{
						image:"sign3-point.png",
						text:'第3天',
						desc:'1积分',
						class:'color-1'
					},
					{
						image:"sign3-point.png",
						text:'第4天',
						desc:'1积分',
						class:'color-1'
					},
					{
						image:"sign3-point.png",
						text:'第5天',
						desc:'1积分',
						class:'color-1'
					},
					{
						image:"sign3-point.png",
						text:'第6天',
						desc:'1积分',
						class:'color-1'
					},
					{
						image:"sign3-point.png",
						text:'第7天',
						desc:'1积分',
						class:'color-1'
					},
				],
				thisDay:0,
				task:[
					{
						image:"sign3-plus.png",
						text:'补签卡',
						desc:'888张补签卡',
						class:'color-1'
					},
					{
						image:"sign3-task.png",
						text:'会员任务',
						desc:'做任务赚积分',
						class:'color-1'
					},
					{
						image:"sign3-shop.png",
						text:'积分商城',
						desc:'小积分大价值',
						class:'color-1'
					},
				]
			}
		},
		onLoad() {
			this.cur_year = this.toYear;
			this.cur_month = this.toMonth;
			this.cur_day = this.today;
			this.getSignList();
		},
		methods: {
			...mapActions(['getUserInfo']),
			// 当前签到记录
			getSignList() {
				let that = this;
				let month = that.cur_month < 10 ? '0' + that.cur_month : that.cur_month;
				let query = `${that.cur_year}-${month}`;
				that.$http('user.signList', {
					month: query
				}).then(res => {
					if (res.code == 1) {
						let emptyDays = that.calculateEmptyGrids();
						that.cuntinueDays = that.cuntinueDays === 0 ? res.data.cuntinue_days : that.cuntinueDays;
						that.days = [...emptyDays, ...res.data.days];
						that.selSign();
					}
				});
			},
			// 选中日期
			selSign() {
				let that = this;
				let selToday = `${that.toYear}-${that.toMonth.toString().padStart(2, '0')}-${that.today.toString().padStart(2, '0')}`;
				let newDay = `${that.cur_year}-${that.cur_month.toString().padStart(2, '0')}-${that.cur_day.toString().padStart(2, '0')}`;
				if (selToday === newDay) {
					let day = that.days.find(item => {
						return item.date === selToday;
					});
					that.isSign = day.is_sign;
				}
			},
			// 计算当月1号前空了几个格子
			calculateEmptyGrids() {
				let that = this;
				let emptyDays = [];
				const firstDayOfWeek = new Date(Date.UTC(that.cur_year, that.cur_month - 1, 1)).getDay();
				if (firstDayOfWeek > 0) {
					for (let i = 0; i < firstDayOfWeek; i++) {
						let obj = {
							day: null,
							is_sign: false
						};
						emptyDays.push(obj);
					}
				}
				return emptyDays;
			},
			//签到
			onSign() {
				let that = this;
				let month = that.cur_month.toString().padStart(2, '0');
				let query = `${that.cur_year}-${month}`;
				that.$http(
					'user.sign',
					{
						month: query
					},
					'签到中...'
				).then(res => {
					if (res.code == 1) {
						that.getSignList();
						that.score = res.data.score;
						that.getUserInfo();
						that.showSign = true;
					}
				});
			},
			
			// 切换控制年月，上一个月，下一个月
			handleCalendar(type) {
				const cur_year = parseInt(this.cur_year);
				const cur_month = parseInt(this.cur_month);
				let newMonth = cur_month;
				let newYear = cur_year;
				switch (type) {
					case 0:
						//上个月
						this.isPresentMonth = true;
						newMonth = cur_month - 1;
						if (newMonth < 1) {
							newYear = cur_year - 1;
							newMonth = 12;
						}
						if (newYear < this.toYear || (newYear === this.toYear && newMonth <= this.toMonth)) {
							this.isPresentMonth = false;
						}
						break;
					case 1:
						newMonth = cur_month + 1;
						if (newMonth > 12) {
							newYear = cur_year + 1;
							newMonth = 1;
						}
			
						if (newYear > this.toYear || (newYear === this.toYear && newMonth > this.toMonth)) {
							this.isPresentMonth = true;
						}
						break;
					default:
						break;
				}
				this.cur_year = newYear;
				this.cur_month = newMonth;
				this.getSignList();
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/c/font_4382910_1bcgyhz3rqw.ttf?t=1703216704048') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #fff;
	}

	.niceui-flex-column {
		flex-direction: column;
	}
	.niceui-flex-row {
		flex-direction: row!important;
	}
	.niceui-center{
		align-items: center;
	}
	.niceui-between{
		justify-content: space-between;
	}
	.width-100p{
		width:100%;
	}
</style>
<style lang="scss" scoped>
	$head-color:#cd3b33;
	$white-color:#fff;
	$radius:20rpx;
	$border-color:#efefef;
	$color-1: #007aff;
	$color-2: #4cd964;
	$color-3: #f0ad4e;
	$color-4: #dd524d;
	$list-item-height:100rpx;
	$list-margin:20rpx;
	$leftColor:#f8621a;
	$rightColor:#fb313a;
	.bg{
		background-image: linear-gradient(to right,$leftColor,$rightColor);
		height: 100vh;
	}	
	.banner {
		width: 100vw;
		height: 290rpx;
		padding: 20rpx 50rpx 35rpx;
		box-sizing: border-box;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		z-index: 9;
		top:0;
		
		text{
			color:#fff;
		}
	}
	.banner-img{
		width: 100%;
	}
	.days-area{
		margin: 10rpx 0 20rpx;
	}
	.day-will{
		background-color: #eeeeee;
	}
	.day-over{
		background-color: #f8eada;
	}
	.six-day-bf{
		width: 67%;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 10rpx 5rpx 10rpx 10rpx;
	}
	.six-day-bf-item{
		width:calc(33% - 12rpx);
		flex-direction: column;
		align-items: center;
		margin: 6rpx ;
		border-radius:10rpx;
		padding: 10rpx 0;
	}
	.six-day-bf-img{
		width: 60rpx;
		margin: 15rpx 0;
	}
	.six-day-bf-img-big{
		width: 80rpx;
	}
	.six-day-bf-item-text{
		font-size: 24rpx;
		color: #956d35;
		text-align: left;
		display: inline-block;
		width: 80%;
	}
	.six-day-bf-item-desc{
		font-size: 24rpx;
		color: #715329;
	}
	.seven-day{
		width: 33%;
		margin: 10rpx 10rpx 10rpx 0;
	}
	.seven-day-item{
		width:calc(100% - 5rpx);
		margin: 6rpx 6px 3px 0;
		border-radius:10rpx;
		padding: 10rpx 0;
		flex-direction: column;
		align-items: center;
	}
	.seven-day-item-desc{
		font-size: 26rpx;
		color: #d3484a;
		font-weight: bold;
		margin-top: 20rpx;
		margin-left:20rpx ;
		margin-right:15rpx ;
	}
	.seven-day-item-img{
		width: 160rpx;
		margin-top:30rpx;
	}
	
	.center-list-item {
		width: 100%;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0rpx 30rpx;
		justify-content: space-around;
		.signin-item{
			flex-direction: column;
			align-items: center;
		}
		.signin-item-img{
			width: 185rpx;
			margin-bottom: 35rpx;
		}
		.signin-item-img-small{
			width: 160rpx;
		}
		.signin-item-text {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
			margin-top: 40rpx;
		}
		.signin-item-desc{
			font-size: 26rpx;
			color: #666;
			margin: 10rpx 0 20rpx;
		}
	}
	.border-bottom {
		border-bottom-width: 1rpx;
		border-color: $border-color;
		border-bottom-style: solid;
	}
		
	.center-nav{
		background-color: #FFFFFF;
		margin:0rpx auto $list-margin;
		width: calc(100vw - 50rpx);
		flex-direction: column;
		border-radius: $radius;
		box-shadow: 0px 1px 10px 1px rgba(0,0,0,0.1);
		
		.center-nav-title{
			padding:25rpx 30rpx;
			font-size:34rpx;
			color:#333;
			font-weight: 400;
			border-bottom: solid 1rpx $border-color;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
		.signin-rule{
			color: #999;
			font-size: 26rpx;
		}
		.rule-more{
			color: #999;
			font-size: 26rpx;
			font-family: texticons;
		}
		.center-nav-content{
			height: 180rpx;
			display: flex;
			align-items: center;
		}
	}
	.margin-top{
		margin-top: 0rpx;
		min-height: 230rpx;
	}
	.act-text{
		font-size: 38rpx;
		color: #333;
		font-weight: bold;
	}
	.other-text{
		font-size: 26rpx;
		color: #888;
		margin-top: 10rpx;
	}
	.strong-text{
		color:#fe474e;
	}
	.other-go{
		background-color: #fe474e;
		width: 100rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 60rpx;
		display: inline-block;
		font-size: 24rpx;
		color: #fff;
		margin-left: 20rpx;
	}
	.act-img{
		width: 190rpx;
		margin-right: 30rpx;
	}
	.padding-card{
		padding:45rpx 30rpx;
	}
	
</style>